<template>
    <div>
        <div class="customeRow">
            <div class="nav">
                <router-link to="/home">主页</router-link>
                / Billingham 博客
            </div>
            <div class="blogTitle title">Billingham 博客</div>
            <div class="customeLine"></div>
            <div class="blogContainer">
                <div class="subTitle">欢迎来到 Billingham 博客社区 - 在这里你可以获取更多与我们相关的信息，以及对许多不同知名摄影师的采访</div>
                <div v-if="articleList.length>0">
                    <div class="blogList">
                        <div class="specialItem customePadding">
                            <div class="specialItemImg">
                                <img :src="articleList[0].image.file_path" alt="billingham"/>
                            </div>
                            <div class="specialItemInfo">
                                <div class="specialItemInfoTemp">
                                    <div class="specialItemInfoTitle">{{articleList&&articleList[0].article_title}}
                                    </div>
                                    <div class="specialItemInfoDetail special">
                                        <div class="date">发表日期：{{articleList&&articleList[0].view_time}}</div>
                                        <div class="views">阅读量：{{articleList&&articleList[0].show_views}}</div>
                                    </div>
                                    <div class="more" @click="handleGetMore(articleList[0].article_id)">了解更多</div>
                                </div>
                            </div>
                        </div>
                        <div class="customePadding">
                            <div v-for="(itemIndex,keyIndex) in indexList" :key="keyIndex">
                                <el-row :gutter="8">
                                    <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" v-for="(item,key) in itemIndex"
                                            :key="key">
                                        <div class="blogListItem">
                                            <div class="blogImg">
                                                <img :src="realList[item].image.file_path" alt="billingham"/>
                                            </div>
                                            <div class="blogListInfo">
                                                <div class="blogListInfoTitle">{{realList[item].article_title}}</div>
                                                <div class="specialItemInfoDetail">
                                                    <div class="date">发表日期：{{realList[item].view_time}}</div>
                                                    <div class="views">阅读量：{{realList[item].show_views}}</div>
                                                </div>
                                                <div class="more" @click="handleGetMore(realList[item].article_id)">
                                                    了解更多
                                                </div>
                                            </div>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="noData" v-if="articleList.length<=0&&!loading">
                    <img src="../assets/noData.png" alt="billingham"/>
                    <div class="text">暂无数据</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import {Row, Col, Message} from 'element-ui';
    import serve from '../util/serve';

    Vue.use(Row);
    Vue.use(Col);
    export default {
        name: 'Blog',
        components: {},
        data: () => {
            return {
                articleList: [],
                indexList: [],
                realList: [],
                loading: false
            }
        },
        metaInfo() {
            return serve.handleSetMeta('blogs', '/blogs');
        },
        props: {},
        mounted() {
            const _this = this;
            const loading = serve.doLoading();
            window.scroll(0, 0);
            _this.loading = true;
            const params = {
                category_id: 6,
                limit: 100
            };
            const url = serve.handleGetUrl('getArticleList', params);
            serve.doPost(url, {})
                .then((response) => {
                    loading.close();
                    _this.loading = false;
                    const data = response.data;
                    if (data.code === 1) {
                        const list = data.data.list.data;
                        const realList = list.slice(1, list.length);
                        const indexList = serve.handleGetIndexList(realList);
                        _this.articleList = list;
                        _this.realList = realList;
                        _this.indexList = indexList;
                    } else {
                        Message({
                            message: data.msg || '请求错误',
                            type: 'error'
                        });
                    }
                }).catch(() => {
                loading.close();
                _this.loading = false;
            })
        },
        methods: {
            handleGetMore(id) {
                this.$router.push('/blogs/' + id)
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .blogContainer {
        padding-bottom: 50px;
    }

    .blogTitle {
    }

    .subTitle {
        padding: 30px 0;
        font-size: 15px;
        line-height: 22px;
    }

    .specialItem {
        display: flex;
        align-items: center;
    }

    .specialItemImg {
        width: calc(100% - 35%);
        text-align: center;
    }

    .specialItemImg img {
        width: 100%;
        max-width: 460px;
    }

    .specialItemInfo {
        width: 35%;
        height: 460px;
        background: #f4f4f4;
        display: flex;
        align-items: center;
        font-size: 14px;
        padding: 0 20px;
    }

    .specialItemInfoTitle {
        font-weight: bold;
        color: #000;
    }

    .blogListInfoTitle {
        color: #000;
        font-weight: bold;
        padding: 10px 0 0 0;
        height: 40px;
    }

    .specialItemInfoDetail {
        margin-top: 10px;
        text-align: justify;
        line-height: 22px;
        display: flex;
        font-size: 12px;
        color: #888;
    }

    .specialItemInfoDetail.special {
        display: block;
    }

    .specialItemInfoDetail.special::after {
        content: " ";
        display: block;
        height: 0;
        clear: both;
    }


    .specialItemInfoDetail .views {
        flex: 1;
        text-align: right;
    }

    .specialItemInfoDetail.special .views {
        float: right;
    }

    .specialItemInfoDetail.special .date {
        float: left;
    }

    .more {
        margin: 20px auto;
        padding: 5px 10px;
        font-size: 12px;
        border: 1px solid orange;
        width: 100px;
        color: orange;
        text-align: center;
        cursor: pointer;
    }

    .blogListItem {
        margin-top: 50px;
    }

    .blogImg {
        display: block;
    }

    .blogImg img {
        width: 100%;
    }

    .blogListInfo {
        font-size: 14px;
    }

    @media screen and (max-width: 767px) {

    }

    @media screen and (max-width: 600px) {
        .specialItemInfo {
            height: 280px;
        }
    }

    @media screen and (max-width: 420px) {
        .blogContainer {
            padding: 0 10px;
        }

        .blogListInfoTitle {
            padding: 0;
        }

        .blogListItem {
            margin-top: 20px;
        }

        .subTitle {
            padding: 20px 0;
        }

        .specialItemImg {
            width: 100%;
        }

        .specialItem {
            display: block;
        }

        .specialItemInfo {
            width: 100%;
            height: auto;
            padding: 30px 0;
            background: #fff;
        }

        .specialItemInfoTemp {
            margin: 0 auto;
            width: 100%;
        }

        .blogListInfo {
            padding: 30px 0;
        }

        .specialItemInfoDetail {
            text-align: center;
        }
    }

    @media screen and (min-width: 420px) and (max-width: 650px) {
        .specialItemInfoDetail.special .views {
            float: left;
        }
    }
</style>
